<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1 {
				padding: 20px;
				background-color: red;
				transition: 0.4s;
				color: white;
				display: block;
				box-sizing: border-box;
				border: none;
			}

			.p1:hover {
				background-color: white;
				color: black;
				border: 1px solid red;
			}

			.p2:hover {
				box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
			}

			.p3 {
				margin-top: 50px;
				width: 100px;
				height: 50px;
				border-radius: 5px;
				border: none;
				background-color: red;
				cursor: pointer;
				position: relative;
			}

			.p3 span {
				font-size: 16px;
				font-weight: 900;
				color: white;
				left: -10px;
				transition: 0.5s;
			}

			.p3 span::after {
				opacity: 0;
				content: "》";
				position: absolute;
				right: 0px;
				transition: 0.5s;
			}
			
			.p3:hover span{
				padding-right: 10px;
				transition: 0.5s;
			}
			
			.p3:hover span::after{
				opacity: 1;
				right: 10px;
				transition: 0.5s;
			}
		</style>
	</head>
	<body>
		<!--按钮颜色-->
		<button style="background-color: red;">Red</button>
		<button style="background-color: green;">Green</button>
		<!--按钮大小-->
		<button style="font-size: 10px;">10px</button>
		<button style="font-size: 20px;">20px</button>
		<!--圆角按钮-->
		<button style="border-radius: 2px;">2px</button>
		<button style="border-radius: 4px;">4px</button>
		<!--按钮边框-->
		<button style="border: 1px solid green;">绿</button>
		<button style="border: 1px solid red;">红</button>
		<!--鼠标悬停按钮-->
		<button class="p1">红</button>
		<!--阴影按钮-->
		<button style="box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);">阴影按钮</button>
		<button class="p2">悬停阴影按钮</button>
		<!--禁用按钮-->
		<button>正常按钮</button>
		<button style="opacity: 0.6;cursor: not-allowed;">禁用按钮</button>
		<br>
		<!--按钮动画-->
		<button class="p3">
			<span>
				前往
			</span>
		</button>
	</body>
</html>